<template>
  <div class="popup">
    <div class="main">
      <div class="main-header">
        <p>近期视频</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="detail">
        <div class="info flex-between flex-align-items-center">
          <div class="left flex">
            <div class="info-avatar pointer" @click="toDetail">
              <img :src="item.avatar">
              <p class="font-18-M">{{ item.score }}</p>
              <div v-if="item.score" class="flex-center flex-align-items-center">
                <i class="iconfont icon-jiesuo"></i>
              </div>
            </div>
            <div>
              <div class="info-name flex flex-align-items-center pointer" @click="toDetail">
                <p class="font-18-B">{{ item.name }}</p>
                <img v-if="item.openEmail" src="@/assets/hasmail.svg">
              </div>
              <div v-if="item.category && item.category.length > 0" class="info-tags flex">
                <p v-for="(tag, tagIndex) in item.category" :key="tagIndex" class="info-tag font-12">
                  {{ tag.name }}</p>
              </div>
              <div v-if="item.country" class="info-location flex flex-align-items-center">
                <i class="iconfont icon-weizhi"></i>
                <p class="">{{ item.country }}</p>
              </div>
            </div>
          </div>
          <div class="right flex">
            <el-tooltip content="收藏" placement="top" effect="light">
              <p class="info-btn flex-center flex-align-items-center pointer"
                :class="{ active: item.collect, 'no-click': btnDisable }" @click="influencerFavoriteChange">
                <i class="iconfont" :class="item.collect ? 'icon-guanzhu-yiguanzhu' : 'icon-guanzhu-weiguanzhu'"></i>
              </p>
            </el-tooltip>
            <el-tooltip :content="item.openEmail ? '发送邮件' : '该红人暂未公开联系方式'" placement="top" effect="light">
              <p class="info-btn flex-center flex-align-items-center pointer"
                :class="{ disabled: !item.openEmail }" @click="toSend">
                <i class="iconfont icon-a-youjian5"></i>
              </p>
            </el-tooltip>
          </div>
        </div>

        <div class="list flex flex-wrap">
          <div v-for="videoItem in list" :key="videoItem.videoId" class="item pointer"
            @click="toLink(videoItem.videoLink)">
            <div class="item-img flex">
              <img :src="videoItem.videoPic">
              <div class="flex-between flex-align-items-center">
                <p class="player flex-center flex-align-items-center">
                  <i class="iconfont icon-bofang"></i>
                </p>
                <p class="time font-14">{{ videoItem.releaseTime }}</p>
              </div>
            </div>
            <p class="item-name font-14 ellipsis-2">{{ videoItem.title }}</p>
            <div class="item-data flex flex-align-items-center">
              <p class="flex flex-align-items-center">
                <i class="iconfont icon-guankan"></i>
                <span class="font-12">{{ numConvert(videoItem.playNum, 2) }}</span>
              </p>
              <p class="flex flex-align-items-center">
                <i class="iconfont icon-dianzan"></i>
                <span class="font-12">{{ numConvert(videoItem.praiseNum, 2) }}</span>
              </p>
              <p class="flex flex-align-items-center">
                <i class="iconfont icon-pinglunxiao"></i>
                <span class="font-12">{{ numConvert(videoItem.commentNum, 2) }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="pagination flex flex-align-items-center" style="justify-content: end;height: 64px;">
          <el-pagination :default-page-size="12" layout="prev, pager, next, total" :total="form.total"
            @current-change="currentChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, defineProps, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import numConvert from '@/js/numConvert';
import api from '@/api/index.js';

const props = defineProps(['item']);
const emit = defineEmits(['close']);
const router = useRouter();

const form = ref({
  influencerId: props.item.influencer_id,
  page: 1,
  perPage: 12
});
const list = ref([]);

const queryVideoList = () => {
  api.sensation.queryVideoList(form.value).then(res => {
    list.value = res.list;
    form.value.total = res.page.total;
  });
}
const currentChange = e => {
  form.value.page = e;
  queryVideoList();
}
const close = () => {
  emit('close', null);
}
const toDetail = () => {
  router.push(`/kocNewDetail?id=${props.item.influencer_id}`);
}
const toLink = url => {
  window.open(url, '_blank');
}
// 收藏或取消收藏
const influencerFavoriteChange = () => {
  let inter = null;
  if (props.item.collect) {
    inter = api.sensation.unfavoriteInfluencer;
  } else {
    inter = api.sensation.favoriteInfluencer;
  }
  btnDisable.value = true;
  inter({ influencerId: props.item.influencer_id }).then(() => {
    if (props.item.collect) {
      ElMessage.success('取消收藏成功');
    } else {
      ElMessage.success('收藏成功');
    }
    btnDisable.value = false;
    emit('change', 'collect');
  }).catch(err => {
    btnDisable.value = false;
    ElMessage.error(err.msg);
  });
}
const toSend = () => {
  if (!props.item.openEmail) {
    return
  }
  router.push(`/writeEmail?id=${props.item.influencer_id}`);
}

onMounted(() => {
  queryVideoList();
});
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 1000px;
    height: 100%;
    background: #fff;

    .detail {
      height: calc(100vh - 52px);
      padding: 0 40px;
      overflow-y: auto;
    }
  }
}

.info {
  height: 128px;

  .left {
    .info-avatar {
      width: 90px;
      height: 90px;
      position: relative;
      margin-right: 16px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      p {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 100%;
        text-align: center;
        line-height: 45px;
        color: #fff;
      }

      div {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 28px;
        height: 28px;
        background: @main-color;
        border-radius: 50%;

        i {
          color: #fff;
        }
      }
    }

    .info-name {
      margin-bottom: 4px;

      &:hover {
        p {
          color: @main-color;
        }
      }

      p {
        color: #333;
        max-width: 230px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      img {
        margin-left: 8px;
        width: 20px;
      }
    }

    .info-tags {
      .info-tag {
        margin: 0 8px 10px 0;
        line-height: 24px;
        background: hsla(0, 0%, 93%, .4);
        border-radius: 12px;
        border: 1px solid #dcdee0;
        font-size: 12px;
        padding: 0 8px;
        color: #606266;
      }
    }

    .info-location {
      i {
        color: #dcdee0;
        margin-right: 4px;
      }

      p {
        color: #666;
      }
    }
  }

  .right {
    .info-btn {
      width: 40px;
      height: 40px;
      background: #f2f2f2;
      border-radius: 14px;
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        background: #ffedf1;

        i {
          color: @main-color;
        }
      }

      &.no-click {
        pointer-events: none;
      }

      &.disabled {
        cursor: no-drop;

        i {
          color: #dcdee0 !important;
        }
      }

      &.active {
        background: #ffedf1;

        i {
          color: @main-color;
        }
      }

      i {
        color: #999;
      }
    }
  }
}

.list {
  height: calc(100vh - 244px);
  overflow-y: auto;
  padding: 30px 0 10px;

  &::-webkit-scrollbar {
    width: 0;
  }

  .item {
    width: 280px;
    max-height: 240px;
    margin-bottom: 40px;
    margin-right: 40px;

    &:nth-child(3n) {
      margin-right: 0;
    }

    .item-img {
      position: relative;
      border-radius: 10px;
      overflow: hidden;

      &:hover {
        img {
          transform: scale(1.2);
        }

        .player {
          background: @main-color;
        }
      }

      img {
        width: 280px;
        height: 157px;
        transition: all .3s;
      }

      div {
        position: absolute;
        left: 0;
        bottom: 10px;
        width: 100%;
        padding: 0 16px;

        .player {
          width: 30px;
          height: 30px;
          border-radius: 15px;
          background: rgba(0, 0, 0, 0.4);

          i {
            color: #fff;
          }
        }

        .time {
          color: #fff;
        }
      }
    }

    .item-name {
      margin-top: 8px;
      color: #333;
    }

    .item-data {
      margin-top: 16px;

      p {
        margin-right: 24px;

        &:last-child {
          margin-right: 0;
        }

        i {
          color: #999;
          margin-right: 2px;
        }

        span {
          color: #999;
        }
      }
    }
  }
}
</style>
